import React from'react';

interface PetOrder {
  id: number;
  name: string;
  description: string;
  imageUrl: string;
}

const petOrders: PetOrder[] = [
  {
    id: 1,
    name: '小型犬洗澡美容套餐',
    description: '包含小型犬洗澡、美容服务、洁白洁牙',
    imageUrl: 'https://cdn8.axureshop.com/demo/2214224/images/%E6%9C%8D%E5%8A%A1%E8%AE%A2%E5%8D%95/u4282.png' // 请替换为实际图片地址
  },
  {
    id: 2,
    name: '猫咪护理套餐',
    description: '包含清洗，吹干，美容护理',
    imageUrl: 'https://cdn8.axureshop.com/demo/2214224/images/%E6%9C%8D%E5%8A%A1%E8%AE%A2%E5%8D%95/u4288.png' // 请替换为实际图片地址
  }
];

const PetOrders: React.FC = () => {
  return (
    <div className="container mx-auto p-4">
      <div className="flex justify-between items-center mb-4">
        <div className="text-2xl font-bold">订单</div>
        <div className="text-gray-600">待评价</div>
      </div>
      {petOrders.map((order) => (
        <div key={order.id} className="flex items-center border p-4 mb-4 rounded">
          <img src={order.imageUrl} alt={order.name} className="w-12 h-12 mr-4" />
          <div>
            <div className="text-lg font-bold">{order.name}</div>
            <div className="text-gray-600">{order.description}</div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default PetOrders;